<template>
	<view>
		<uni-nav-bar class="navBar" fixed="true" statusBar 
		height="100rpx" backgroundColor="#fff" leftWidth="40rpx"
			rightWidth="130rpx" border="false">
			<block slot="left">
				<uni-icons type="back" size="25" color="#000" 
				@click="$commonFunc.backPage(1)"></uni-icons>
			</block>
			<view class="avatar-bg" @click="toPerson(data.uid)">
				<block v-if="author.avatar">
					<image :src="`${tempUrl}${author.avatar}`" class="avatar"></image>
				</block>
				<block v-else>
					<image src="../../static/default/default-avatar.png" class="avatar"></image>
				</block>
				<!-- <image :src="`../../static/mode/${data.avatar}`" mode="" ></image> -->
				<text style="font-size: 28rpx;">{{author.name}}</text>
			</view>
			<!-- <block slot="right">
				<view class="concern-btn active" v-if="isFollow">
					已关注
				</view>
				<view class="concern-btn" v-else>
					关注
				</view>
			</block> -->
		</uni-nav-bar>
		<!-- 图片 -->
		<scroll-view>
			<view class="carousel">
				<swiper indicator-dots circular=true duration="400">
					<swiper-item class="swiper-item" v-for="(item,index) in data.imgList" :key="index">
						<view class="image-wrapper">
							<image :src="`${tempUrl}${item}`" class="loaded" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 内容 -->
			<view class="article">
				<view class="title">{{data.title}}</view>
				<view class="content">
					{{data.content}}
				</view>
				<view class="tags" v-if="data.tagslist">
					<block v-for="item in data.tags">
						{{`#${item} `}}
					</block>
				</view>
				<text class="time">{{data.createtime||''}}</text>
			</view>
		</scroll-view>
		<view class="page-bottom">
			<view class="p-item">
				<uni-icons type="star" size="40"></uni-icons>
				<!-- <uni-icons type="star-filled" size="30"></uni-icons> -->
				<text>{{data.collectCount||0}}</text>
			</view>
			<view class="p-item">
				<uni-icons type="heart" size="40"></uni-icons>
				<!-- <uni-icons type="heart-filled" size="30"></uni-icons> -->
				<text>{{data.startcount||0}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/common/js/request.js"
	export default {
		data() {
			return {
				isFollow: false,
				data: {
					collectCount:0,
					startCount:0,
					tags:['萌宠','萌探']
				},
				article:{},
				author:{},
				tempUrl:''
			};
		},
		onLoad(options) {
			const item = options.data ? JSON.parse(decodeURIComponent(options.data)) : '';
			this.author=item.author
			this.data=item
			this.data.imgList=item.imglist.split(',')
			this.data.createtime=this.data.createtime.slice(0, -3)
		},
		created(){
			this.tempUrl=this.baseUrl
		},
		methods:{
			toPerson(uid){
				console.log(uid)
				uni.navigateTo({
					url:`/profile/person/person?data=${uid}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navBar {
		line-height: 90rpx;
	}

	.avatar {
		margin-left: 20rpx;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 20rpx;
	}

	.concern-btn {
		color: $app-theme-color;
		font-size: 28rpx;
		border-radius: 25rpx;
		border: 1px $app-theme-color solid;
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.active {
		background-color: $app-theme-color;
		color: #fff;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			min-height: 300rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	scroll-view {
		height: 100%;
		padding-bottom: 160rpx;
	}

	.article {
		padding: 30rpx 40rpx;
		line-height: 1.5em;
		letter-spacing: 0.1em;
		white-space: pre-line;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 1.5em;
			color: #555;
			margin-bottom: 15rpx;
		}

		.content {
			margin-bottom: 15rpx;
			font-size: 32rpx;
		}
		.tags{
			color:blue;
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		bottom: 4rpx;
		z-index: 95;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 120upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;
		
	}
	.time{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #606266;
	}
	.p-item{
		color: #000;
		display: flex;
		align-items: center;
		text{
			margin-left: 20rpx;
			font-size: 34rpx;
		}
		
	}
	
</style>
